<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="icon" href="data:;base64,=">
    <title>Document</title>
    </head>
    <style>
    *{margin:0;padding:0;box-sizing:border-box;}
    html,body{position:absolute;width:100%;height:100%;min-width:1366px;min-height:768px;background: linear-gradient(skyblue,khaki);}
    /* 定义滚动条宽度 */::-webkit-scrollbar {width:4px;height:4px;}
    /*定义滚动条  轨道背景色+圆角*/::-webkit-scrollbar-track {border-radius: 2px;background-color: #555;}
    /*定义滚动条  滑块背景色+圆角*/::-webkit-scrollbar-thumb {border-radius: 2px;background-color: #C3C4C3;}
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    
    #app{
         position:absolute;
         left:50%;
         top:40px;
         width: 600px;
         height:fit-content;
         padding:20px;
         font-size:13px;
         transform: translate(-50%,0);
         background-color: aliceblue;
         border-radius:5px;
    }
    #app div{
        height:fit-content;
        padding:4px;
        margin-top:2px;
        margin-bottom:2px;
        margin-left:10px;
        border:1px dashed #D469F3; 
        border-radius:5px;
    }
    #app .bt{
        width:fit-content;
        color:white;
        background-color:#D469F3 ;
    }
    #app .bt2{
        width:fit-content;
        color:white;
        background-color:#2B4DEC ;
    }
    </style>
<body>

   <div id="app">
          <div class="bt">基本</div>
          <div e-attr="title=title;"> 
                e-attr="title=name;"
               <div e-style="color=color;">
                   嵌套 e-style="color=color;"
               </div>
               <div class="bt2">fork</div>
               <div e-fork="fork">
                     <span e-attr="title=title"> fork </span>
               </div>
          </div>
          <div class="bt">循环体内</div>
          <div e-for="list0">
                  <div>
                        <span style="color:red;font-size:12px;">列表数据 0001 </span>
                  </div>
                  <div class="bt2">fork</div>
                  <div e-fork="fork2">
                       <span>fork2</span>
                  </div>
          </div>
   </div>


</body>
</html>
<script type="module">
 import Eng from './js/eng3.0.dev.ts';
 
 let app=new Eng({
      el:'app',
      data:{
           title:'测试title',
           color:'red',
           fork:{
                title:'fork 内的title'
           }

      }
 })



</script>